<template>
  <div class="box">
    

    <ul>
        <div>
          <img :src="categoryArr.img_url" height="140px" width="95%" />
          <h5>{{categoryArr.front_name }}</h5>
        </div>
    </ul>
    <!-- 
        <h3>{{categoryArr.name}}</h3>
        <p>
            <img :src="categoryArr.wap_banner_url" alt="" class="image">
            <span></span>
        </p>
     -->
   <div class="div2">
    <h2>{{categoryArr.name}}</h2>
    <van-grid :column-num="4">
        <van-grid-item v-for="value in categoryArr.subCategoryList" :key="value.id" :icon="value.wap_banner_url" :text="value.name" @click=Togoodsdata(value.id) />
    </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "LmagesComponent",
  data() {
    return {
      show: "true",
      
    };
  },
  // 在子组件中接收父组件传递进来的数据  使用 props  读 普肉破死
  props: ["categoryArr"],
  mounted() {
    setTimeout(() => {
      console.log(this.categoryArr.subCategoryList[0].wap_banner_url);
    }, 1000);
  },
  methods:{
    Togoodsdata(id){
      this.$router.push({path:"/goodsFnlei",query:{id:id}})
    }

  }
};
</script>

<style scoped lang='less'>
.box {
//   float:right;
  display: flex;
  flex-wrap: wrap;
  top: 0px;
  ul {
    width: 100%;
    // margin-left:20px;
    
    div {
      width: 100%;
      position: relative;
      img {
        margin: 0 7px;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      h5 {
        width: 100%;
        color:white;
        position: absolute;
        top: 48%;
        left: 0%;
        z-index: 222;
        text-align: center;
        font-size:18px;
      }
    }
  }
 .div2{
 text-align: center;
 margin-top:20px;
 h2{
  margin-bottom: 20px;
 }
 }
}
</style>